<template>
  <div class="page">
    <button @click="getSelectedRows()">Get Selected Rows</button>
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue style="width: 50%; height: 500px;" class="ag-theme-alpine" :columnDefs="columnDefs" :rowData="rowData"
      :enableColResize="true" @gridReady="onGridReady" @cellClicked="onCellClicked" rowSelection="multiple">
    </ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'
export default {
  name: '',
  components: {
    AgGridVue
  },
  props: {},
  data () {
    return {
      columnDefs: null,
      rowData: null,
      gridApi: null,
      columnApi: null
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter ......................');
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  watch: {},
  computed: {},
  methods: {
    onGridReady (params) {
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
    },
    onCellClicked (cell) {
      console.log(cell);
    },
    getSelectedRows () { }
  },
  created () {
    console.log('created ......................');
    let a = undefined;
    if (a) {
      console.log('a true');
    } else {
      console.log('a false');
    }

    let b = null;
    if (b === undefined || b === null || b === '') {
      console.log('b true');
    } else {
      console.log('b false');
    }
  },
  mounted () { },
  beforeMount () {
    this.columnDefs = [
      { headerName: '名称', field: 'title', checkboxSelection: true },
      { headerName: '网址', field: 'url', width: 200 },
      { headerName: '分类', field: 'catalog' },
      { headerName: 'PR', field: 'pr' }
    ],
      //需要显示的数据
      this.rowData = [
        { title: '谷歌', url: 'www.google', catalog: '搜索引擎', pr: 10 },
        { title: '微软', url: 'www.microsoft.com', catalog: '操作系', pr: 10 },
        { title: 'ITXST', url: 'www.itxst.com', catalog: '小站', pr: 1 },
        { title: '淘宝', url: 'www.taobao.com', catalog: '电商', pr: 8 }
      ]
  }
} 
</script>
<style lang="scss">
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";
</style>
<style scoped>
/* lang="scss" */
</style>